軽量版Anĝela Osto

使い方

code:usercss.css

中身

nremiel.aureolo rev. 2025-10-14

code:style.css

@import "/api/code/nremiel/settings%2Ffonts/style.css";

@import "/api/code/nremiel/nremiel.theme.core/style.css";

@import "/api/code/nremiel/nremiel.theme.code-highlight.yaru/style.css";

body,

body *:has(.app),

.app {

--current-project-skin-name: "Alruina Aŭreolo (rev. 2025-10-14)";

--body-bg: var(--c-bg-bottom);

}

body,

body *:has(.app),

.app,

.app *:not(.char-index) {

--blockquote: "Atkinson Hyperlegible Next", var(--smaller);

--paragraph-latin: "Zilla Slab", "Atkinson Hyperlegible Next", "Inter Variable", var(--sans-serif-latin);

--paragraph-ja: "UD Digi Kyokasho NK", -apple-system, BlinkMacSystemFont, "GenEi Antique", "源暎アンチック", "GenEi Antique v5", "源暎アンチック v5", "BIZ UDGothic", var(--tiny-ja);

--ffs-blockquote: '';

--fw-paragraph: 450;

--h1-latin: "Libertinus Serif", "Libertinus Serif Display", "EB Garamond", var(--serif-latin);

--h2: var(--h1);

--h3: var(--h2);

--h4: var(--h3);

--ffs-h1: '';

--fw-h1: 500;

--fw-h2: 500;

--fw-h3: 500;

--fw-h4: 600;

--fw-strong: 700;

--blockquote: var(--smaller);

--ffs-blockquote: '';

--fw-blockquote: 400;

}

body,

body *:has(.app),

.app {

--c-ui-accent-color: var(--c-purple-3);

--c-ui-accent-color-selectable: var(--c-purple-2);

--c-caret-cursor: var(--c-nrem-sango-4);

--c-bg-text-selection: var(--c-red-1);

/* --c-bg-bottom: var(--c-nrem-osto-5); */

/* hsl(223, 7%, 81%); */

--c-bg-bottom: hsl(223, 12%, 90%);

--c-bg-card: var(--c-bg-page-main);

--c-bc-card-topline: var(--c-nrem-sango-3);

--c-bc-card-topline: hsl(0, 0%, 79%);

/* --c-bc-card-topline: var(--c-purple-1); */

--c-bg-card-pinned: var(--c-nrem-sango-2);

--c-fg-card-backside: var(--c-purple-3);

--c-tx-card-title: var(--c-tx-normal);

--shadow-box-card:

0 0 0.25rem hsl(from black h s l / 0.2),

2.8px 2.8px 2.2px hsl(from black h s l / 0.02),

6.7px 6.7px 5.3px hsl(from black h s l / 0.028),

12.5px 12.5px 10px hsl(from black h s l / 0.035),

22.3px 22.3px 17.9px hsl(from black h s l / 0.042),

41.8px 41.8px 33.4px hsl(from black h s l / 0.05),

100px 100px 80px hsl(from black h s l / 0.07);

--c-bg-page-main: var(--c-light-2);

--c-bg-page-main-lines: var(--c-light-2);

--bg-page-lines-line-section: var(--c-bg-page-main-lines);

--bg-page-lines-line-section: linear-gradient(var(--c-dark-5) 65%, hsl(from var(--c-bg-page-main-lines) h s l / 35%) 35%);

--bg-page-lines-line-section: var(--c-bg-page-main-lines);

--c-bg-current-line: hsl(from var(--c-red-5) h s l / 65%);

--c-bg-current-line: var(--c-nrem-osto-2);

--c-bg-current-line: white;

--border-page-main-top: 8px solid var(--c-nrem-osto-3);

--c-shadow-box-page-main: hsl(from midnightblue h s 50%);

--c-shadow-box-page-main-alt: var(--c-purple-3);

--shadow-box-page-main:

0 0 0.25rem hsl(from var(--c-shadow-box-page-main) h s l / 0.2),

2.8px 2.8px 2.2px hsl(from black h s l / 0.02),

6.7px 6.7px 5.3px hsl(from var(--c-shadow-box-page-main) h s l / 0.028),

12.5px 12.5px 10px hsl(from var(--c-shadow-box-page-main-alt) h s l / 0.035),

22.3px 22.3px 17.9px hsl(from var(--c-shadow-box-page-main-alt) h s l / 0.042),

41.8px 41.8px 33.4px hsl(from var(--c-shadow-box-page-main-alt) h s l / 0.05),

100px 50px 80px hsl(from var(--c-shadow-box-page-main) h s l / 0.07),

-2.8px 2.8px 5.3px hsl(from var(--c-shadow-box-page-main) h s l / 0.01),

-6.7px 6.7px 5.3px hsl(from var(--c-shadow-box-page-main-alt) h s l / 0.028),

-12.5px 12.5px 10px hsl(from var(--c-shadow-box-page-main-alt) h s l / 0.035),

-22.3px 22.3px 17.9px hsl(from var(--c-shadow-box-page-main-alt) h s l / 0.042),

-41.8px 41.8px 33.4px hsl(from var(--c-shadow-box-page-main-alt) h s l / 0.05),

-100px 50px 80px hsl(from var(--c-shadow-box-page-main) h s l / 0.07);

--shadow-box-page-main-lines: ;

--c-telomere: hsl(from var(--c-light-4) h s l / 77.5%);

--c-telomere-unread: var(--c-purple-1);

--c-telomere-updated-after-load: var(--c-green-2);

--c-telomere-updated-after-load-unread: hsl(from crimson h s l / 55%);

--c-telomere-updated-after-load-unread: hsl(from deeppink h s l / 85%);

--c-telomere-updated-after-load-unread: hsl(from var(--c-red-1) h s l / 85%);

--c-telomere-will-delete-next: var(--c-red-5);

--c-fg-indent-mark: darkslategray;

--c-fg-indent-mark: var(--c-dark-2);

--c-bg-indent-level-0: hsl(from var(--c-bg-page-main) h s l / 50%);

--c-bg-indent-level-1: var(--c-bg-page-main-lines);

--c-bg-indent-level-1: transparent;

--c-fg-indent-level-1-line: var(--c-purple-4);

--c-bg-indent-level-2: hsl(from var(--c-bg-bottom) h s 10%);

--c-bg-indent-level-2: transparent;

--c-fg-indent-level-2-line: var(--c-purple-4);

--c-bg-indent-level-3: hsl(from var(--c-nrem-magiero-5) h s 8%);

--c-bg-indent-level-3: transparent;

--c-fg-indent-level-3-line: var(--c-purple-4);

--c-bg-indent-level-4: hsl(from var(--c-bg-bottom) h s 6%);

--c-bg-indent-level-4: transparent;

--c-fg-indent-level-4-line: var(--c-purple-4);

--c-bg-a-indent-opacity: 0.5;

--c-tx-normal: var(--c-nrem-vervo-6);

--c-tx-strong: var(--c-dark-4);

--c-tx-week: var(--c-dark-1);

--c-bg-code: hsl(from var(--c-light-5) h s l / 25%);

--c-tx-code: var(--c-dark-4);

--c-tx-link: var(--c-blue-4);

--c-bg-link-hashtag: transparent;

--c-tx-link-hashtag: var(--c-green-4);

--c-bg-line-permalink: hsl(from var(--c-nrem-magiero-4) h s l / 35%);

--c-bg-line-permalink: hsl(from var(--c-caret-cursor) h s l / 35%);

--c-tx-link-empty: var(--c-red-3);

--c-tx-link-empty-hashtag: var(--c-purple-1);

--c-bg-blockquote: hsl(from var(--c-light-4) h s l / 25%);

--c-bg-blockquote: hsl(from var(--c-bg-bottom) h s l / 20%);

--c-tx-blockquote: var(--c-nrem-vervo-5);

--c-border-blockquote-left: var(--c-light-5);

--border-blockquote-left: var(--c-border-blockquote-left) solid 4px;

--c-border-blockquote-right: hsl(from var(--c-bg-bottom) h s l / 5%);

--border-blockquote-right: var(--c-border-blockquote-right) solid 8px;

--border-section: calc(0.05rem * var(--h-line-base)) solid hsl(from midnightblue h s l / 0.42);

--c-tx-h1: var(--c-tx-strong);

--c-tx-h2: var(--c-tx-alt);

--c-tx-h3: var(--c-tx-normal);

--c-tx-h4: var(--c-tx-alt);

--border-section: calc(0.05rem * var(--h-line-base)) solid var(--c-bg-bottom);

/* Variantoj por la naviga ilarbreto */

--shadow-box-navbar: none;

--c-bg-navbar: hsla(0, 0%, 93%, 82.5%);

--c-bg-navbar: hsl(from var(--c-purple-3) h s l / 75%);

--c-bg-navbar: none;

--c-tx-navbar: var(--c-red-4);

--c-tx-navbar: var(--c-dark-3);

--c-ic-navbar: var(--c-tx-navbar);

--c-tx-navbar-project-name: var(--c-purple-3);

--c-ic-navbar-button-new-page: var(--c-white-5);

/* la implicita de Paper Light */

--c-ic-navbar-button-new-page: ;

--c-ic-navbar-button-new-page-hover: var(--c-nrem-sango-4);

/* la implicita de Default White */

--c-ic-navbar-button-new-page-hover: ;

--c-ic-navbar-button-new-page-vertical-line: red;

--c-ic-navbar-button-new-page-vertical-line: ;

--c-ic-navbar-button-new-page-horizontal-line: var(--c-nremi-vervo-5);

--c-ic-navbar-button-new-page-horizontal-line: ;

--c-ic-navbar-button-new-page: var(--c-white-5);

/* la implicita de Paper Light */

--c-ic-navbar-button-new-page: ;

--c-ic-navbar-button-new-page-hover: var(--c-nrem-sango-4);

/* la implicita de Default White */

--c-ic-navbar-button-new-page-hover: ;

--c-ic-navbar-button-new-page-vertical-line: red;

--c-ic-navbar-button-new-page-vertical-line: ;

--c-ic-navbar-button-new-page-horizontal-line: var(--c-nremi-vervo-5);

--c-ic-navbar-button-new-page-horizontal-line: ;

--c-bg-navbar-search-form: hsl(from var(--c-purple-5) h calc(s * 1.5) calc(l * 0.8) / 75%);

--c-bg-navbar-search-form: hsl(from var(--c-purple-3) h s l / 65%);

--c-bg-navbar-search-form: hsl(from var(--c-dark-1) h s l / 15%);

--c-tx-navbar-search-form: var(--c-light-3);

--c-tx-navbar-search-form-default-text: var(--c-light-5);

--c-bg-navbar-search-form-focus: var(--c-nrem-magiero-5);

--c-tx-navbar-search-form-focus: white;

--shadow-box-navbar-search-form-focus:

0 0 4px hsl(from var(--c-ui-accent-color) h s l / 0.22),

0 0px 6px hsl(from var(--c-ui-accent-color) h s l / 0.22),

0 0 6px hsl(from var(--c-ui-accent-color) h s l / 0.22),

0 -3px 10px hsl(from var(--c-ui-accent-color) h s l / 0.22),

0 8px 16px hsl(from var(--c-ui-accent-color) h s l / 0.24);

--c-bg-stream-page-status-bar: hsl(from var(--c-purple-3) h s l / 85%);

--c-tx-toolbar-cardlist: var(--c-light-5);

--c-bg-dropdown-menu: hsl(208 35% 97% / 85%);

--c-bg-dropdown-menu-focus: var(--c-light-4);

--c-tx-dropdown-menu: var(--c-tx-normal);

--c-tx-dropdown-menu-activated: var(--c-ui-accent-color-selectable);

--c-border-dropdown-menu-activated: var(--c-ui-accent-color-selectable);

--border-dropdown-menu-activated: 2px solid var(--c-border-dropdown-menu-activated);

/* Page menu */

--c-bg-page-manu: hsl(0 0% 97% / 50%);

--c-bg-dropdown-button-focus: var(--c-light-4);

--c-tx-dropdown-button-text: var(--c-dark-5);

--c-tx-dropdown-button-icon: var(--c-dark-1);

/* */

--c-bg-popup-menu: black;

--shadow-box-popup-menu:

0 0 0.375rem hsl(from var(--c-purple-3) / 0.125),

0 0 0.25rem hsl(from var(--c-red-3) / 0.15);

--c-tx-popup-menu-item: white;

--border-popup-menu-item: 1px solid hsl(0 0 10% / 35%);

/* Related page lits */

--c-bg-bottom-related: --var(--c-bg-bottom);

/* --c-bg-bottom-related-toolbar: hsl(0, 0%, 77%); */

--c-bg-bottom-related-toolbar: --var(--c-bg-bottom);

--c-tx-related-search-form: black;

--c-bg-related-search-form-focus: white;

--c-bg-related-search-form-focus: hsl(0, 0%, 95%);

--border-related-search-form-focus: none;

--shadow-related-search-form-focus: ;

--shadow-box-page-list-search:

0 0 4px rgba(0, 0, 0, 0.12),

0 0 6px rgba(0, 0, 0, 0.12),

0 0 7px rgba(0, 0, 0, 0.12),

0 8px 16px rgba(0, 0, 0, 0.14),

0 8px 16px rgba(0, 0, 0, 0.14);

--shadow-box-page-list-search-focus:

0 0 4px hsl(from var(--ui-accent-color) h s l / 0.12),

0 0 6px hsl(from var(--ui-accent-color) h s l / 0.12),

0 0 7px hsl(from var(--ui-accent-color) h s l / 0.12),

0 8px 16px hsl(from var(--ui-accent-color) h s l / 0.14),

0 8px 16px hsl(from var(--ui-accent-color) h s l / 0.14);

--shadow-box-page-list-search-focus: var(--shadow-box-navbar-search-form-focus);

--relation-label-links-bg: white;

--relation-label-empty-bg: white;

/* Statusbar */

--c-bg-statusbar-page-title: var(--c-purple-1);

--c-tx-statusbar-page-title: var(--c-light-1);

--c-bg-statusbar-page-status-sync-confirmed: var(--c-green-5);

--c-fg-statusbar-page-status-sync-confirmed: var(--c-light-1);

--c-bg-statusbar-page-status-error: hsl(from var(--c-red-1) h s l / 85%);

--c-tx-statusbar-page-status-error: var(--c-light-1);

--c-bg-statusbar-page-list-status: var(--c-purple-1);

--c-tx-statusbar-page-list-status: var(--c-light-1);

--c-bg-statusbar-project-status-private: var(--c-dark-5);

--c-ic-statusbar-project-status-private: var(--c-light-2);

--c-bg-statusbar-project-plan-badge: var(--c-bg-navbar);

--c-tx-statusbar-project-plan-badge: var(--c-tx-navbar-project-name);

&:has(.line.cursor-line) {

--c-bg-page-main-lines: var(--c-light-2);

--shadow-box-navbar: none;

--c-bg-navbar: transparent;

--c-bg-navbar-search-form: hsl(from var(--c-dark-1) h s l / 5%);

--c-tx-navbar-project-name: var(--c-red-3);

& .line:not(.cursor-line) {

--c-tx-normal: var(--c-dark-3);

}

}

--c-shadow-box-page-main: var(--c-nrem-sango-4);

--c-shadow-box-page-main-alt: var(--c-purple-4);

--shadow-box-page-main:

0 0 0.25rem rgb(from var(--c-shadow-box-page-main) r g b / 0.2),

2.8px 2.8px 2.2px rgb(from var(--c-shadow-box-page-main) r g b / 0.02),

6.7px 6.7px 5.3px rgb(from var(--c-shadow-box-page-main) r g b / 0.028),

12.5px 12.5px 10px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.035),

22.3px 22.3px 17.9px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.042),

41.8px 41.8px 33.4px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.05),

100px 100px 80px rgb(from var(--c-shadow-box-page-main) r g b / 0.035),

-2.8px 2.8px 5.3px rgb(from var(--c-shadow-box-page-main) r g b / 0.01),

-6.7px 6.7px 5.3px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.028),

-12.5px 12.5px 10px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.035),

-22.3px 22.3px 17.9px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.042),

-41.8px 41.8px 33.4px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.05),

-100px 100px 80px rgb(from var(--c-shadow-box-page-main) r g b / 0.035);

--shadow-box-page-list-search:

0 0 4px rgba(0, 0, 0, 0.12),

0 0 6px rgba(0, 0, 0, 0.12),

0 8px 16px rgba(0, 0, 0, 0.14);

--border-section: calc(0.10rem * var(--h-line-base)) solid hsl(from var(--c-shadow-box-page-main) h s l / 0.105);

--c-tx-navbar-project-name: var(--c-purple-3);

}

}